<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script type="module">
      import { $GIF, $getGifWorker } from "./index.js";
      function toGif() {
        // 生成GIF
        try {
          let gif = new $GIF({
            workers: 2,
            quality: 10,
            // width: 1200,
            // height: 500,
            workerScript: $getGifWorker(), //自定义worker地址
          });

          //本地图片---对所有的图片进行处理，利用canvas绘制图片
          // let imgEle1 = document.getElementById("img1");
          // let imgEle2 = document.getElementById("img2");
          // let imgEle3 = document.getElementById("img3");
          // let imgEle4 = document.getElementById("img4");
          // let imgs = [imgEle1, imgEle2, imgEle3, imgEle4];
          // imgs.forEach((img) => {
          //   console.warn("imgimgimg", img);
          //   const cv = document.createElement("canvas");
          //   cv.width = 1200;
          //   cv.height = 500;
          //   let ctx = cv.getContext("2d", { willReadFrequently: true });
          //   ctx.fillStyle = "#fff";
          //   ctx.fillRect(0, 0, cv.width, cv.height);
          //   ctx.drawImage(img, 20, 10, cv.width, cv.height);
          //   gif.addFrame(cv, { delay: 200 });
          // });

          //http图片---对所有的图片进行处理，利用canvas绘制图片
          let imgArr = [
            "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
            "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
            "https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg",
            "https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg",
          ];
          let promiseArr = [];
          for (let index = 0; index < imgArr.length; index++) {
            let utl_ = imgArr[index];
            let fn = () => {
              return new Promise((reslove, reject) => {
                let img = new Image();
                img.src = utl_ + "?" + new Date().getTime();
                img.setAttribute("crossOrigin", "");
                img.onload = function () {
                  console.warn("2222222222222");
                  const cv = document.createElement("canvas");
                  cv.width = 1200;
                  cv.height = 500;
                  let ctx = cv.getContext("2d", { willReadFrequently: true });
                  ctx.drawImage(img, 20, 10, cv.width, cv.height);
                  gif.addFrame(cv, { delay: 200 });
                  reslove("ok");
                };
              });
            };
            promiseArr.push(fn());
          }
          Promise.all(promiseArr)
            .then((result) => {
              console.warn("result", result);
              // 渲染gif
              gif.render();
              //图片合成后
              gif.on("finished", (blob) => {
                let a = document.createElement("a");
                a.href = URL.createObjectURL(blob);
                a.download = "test.gif";
                a.click();
                gif.abort();
              });
            })
            .catch((error) => {
              console.warn("error", error);
            });
        } catch (error) {
          console.log(error);
        }
      }

      window.onload = () => {
        toGif();
      };
    </script>
  </body>
</html>
